<template>
  <view>
    <view class="title"> 祝你好运 </view>

    <view class="content">
      <view class="round" @click="GoLuck"> 快乐8 </view>
      <view class="round" @click="GoLuck"> 双色球 </view>
    </view>
  </view>
</template>

<script setup>
const GoLuck = () => {
	uni.navigateTo({
		 url: '/pages/lucky/index'
	});
}
</script>

<style>
.title {
	display: flex;
	justify-content: center;
  color: #ff8055;
  font-size: 32rpx;
  margin: 100rpx 0;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.round {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff4b5c, #ff6b6b); /* 渐变色 */
 color: white; /* 文字颜色 */
 font-size: 32rpx; /* 字体大小 */
 text-align: center; /* 文字居中 */
 cursor: pointer; /* 鼠标变成手形 */
 box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
 transition: all 0.3s ease; /* 动画过渡 */
  line-height: 200rpx;
  margin: 0 50rpx;
  
  
}

.round:hover {
  background: linear-gradient(145deg, #ff4b5c, #ff6b6b); /* 鼠标悬停时渐变方向反转 */
  transform: translateY(-6rpx); /* 向上偏移 */
  box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.15); /* 鼠标悬停时更强的阴影效果 */
}

.round:active {
  transform: translateY(4rpx); /* 按钮点击时稍微下沉 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 点击时阴影减小 */
}

</style>
